<template>
	<view class="device-item" @click="itemClick">
		<view class="item-head">
			<u-checkbox v-if="showEdit"  v-model="isChecked" shape="circle"></u-checkbox>
			<view class="head-text">{{ device.name }}</view>
		</view>
		
		<u-line></u-line>
		<view class="item-text">MAC地址: <text>{{ device.mac }}</text></view>
		<view class="item-text">车牌号码: <text>{{ device.plateNo }}</text></view>
		<view class="item-text">车辆编号: <text>{{ device.number }}</text></view>
		<u-gap height="20" bg-color="#f5f5f5"></u-gap>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			}
		},
		props:{
			device:{
				type:Object,
				default:()=>{}
			},
			showEdit:{
				type:Boolean,
				default:false
			},
			checkList:{
				type:Array,
				default:[]
			},
		},
		computed:{
			isChecked:{
				get(){
					console.log('isChecked:',this.checkList.includes(this.device.number))
					return this.checkList.includes(this.device.number)
				},
				set(){}
			}
		},
		methods:{
			// checkChange(value){
			// 	this.$emit('deviceCheck',value.value,this.device.number)
			// 	// this.device.edit = !this.device.edit
			// },
			itemClick(){
				if(this.showEdit){
					this.$emit('deviceCheck',!this.isChecked,this.device.number)
				}else{
					this.$emit('deviceClick',this.device)
				}
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrap{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.device-item{
		display: flex;
		flex-direction: column;
		.item-head{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 15rpx 30rpx 15rpx;
			.head-text{
				}
		}
		.item-text{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 15rpx 30rpx 15rpx;
		}
	}
	
</style>
